<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-grid.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-reboot.min.css"/>
    <style>
        *{margin: 0;padding: 0; list-style: none;}
        .box{
            width: 800px;
            margin: 20px auto;
        }
        .describe{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="box">
    <label><h2>SpringBoot+ES搜索</h2></label>
    <div class="content">
        <div class="row" id="app">
            <div style="width: 100%">
                <input class="form-control" style="width: 80%;margin-left: 1rem;float: left;" id="goodsName" v-on:input="thinkGoodsName" placeholder="输入你要搜索的内容"/>
                <!--            <button type="button" class="btn btn-primary" style="margin-left: 2rem" v-on:click="searchGoods()">mysql搜索</button>-->
                <button type="button" class="btn btn-primary" style="margin-left: 2rem" v-on:click="searchGoodsByES()">ES搜索</button>
            </div>
            <ul id="goodsNameList" style="display: none;margin-left: 1rem;width: 80%;color: #666;border: 1px solid #6666;border-top: none;padding-left: 0.5rem;" >
            </ul>
            <div class="col-sm-6" v-for="(good,index) in goods" style="margin-top: 20px;">
                <div class="card">
                    <div class="card-img-top">
                        <img :src="'img/'+(good.goodsNameEn)+'.jpg'" style="height: auto;width: 100%"/>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{good.goodsName}}</h5>
                        <p class="describe">{{good.goodsDescribe}}</p>
                        <a :href="'/goodsDetail?id='+good.id" style="float: right;">...详情</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            goods: [],
            search: ""
        },
        methods: {
            searchGoods:function () {
                var that = this;
                $.ajax({
                    type: 'get',
                    data: {"search": $("#goodsName").val()},
                    url: "/searchGoods",
                    success: function (data) {
                        if(data.code==1){
                            if (data.length > 0) {
                                that.goods = data
                            } else {
                                that.goods=[];
                                alert("没有搜到你想要的商品！")
                            }
                        }else{
                            alert(data.msg)
                        }
                    }
                })
            },
            searchGoodsByES: function () {
                var that = this;
                $.ajax({
                    type: 'get',
                    data: {"search": $("#goodsName").val()},
                    url: "/searchGoodsByES.json",
                    success: function (data) {
                        if(data.code==1){
                            if (data.data.length > 0) {
                                that.goods = data.data
                            } else {
                                that.goods=[];
                                alert("没有搜到你想要的商品！")
                            }
                        }else{
                            alert(data.msg)
                        }
                    }
                })
            },
            thinkGoodsName:function () {
                var that = this;
                $.ajax({
                    type: 'get',
                    data: {"search": $("#goodsName").val()},
                    url: "/searchGoodsNameByES.json",
                    success: function (data) {
                        console.log(data);
                        $("#goodsNameList").show();
                        if(data.code==1){
                            if (data.data.length > 0) {
                                $("#goodsNameList").empty();
                              data.data.forEach(function (item) {
                                  $("#goodsNameList").append("<li style='line-height: 2rem' onclick='inputThinkGoodsName(this.innerText)'>"+item+"</li>")
                              });

                            } else {
                                $("#goodsNameList").empty();
                                $("#goodsNameList").append("<li style='line-height: 2rem'>没有搜到你想要的商品</li>")
                            }
                        }else{
                            alert(data.msg)
                        }
                    }
                })
            }
        },
        created:function () {
            this.searchGoodsByES();
        }
    });
    function inputThinkGoodsName(value) {
        $("#goodsName").val(value);
        $("#goodsNameList").hide();
    }
</script>
</html>